import type { CalendarProps } from './index' 
import { Dayjs } from 'dayjs';

interface MonthCalendarProps extends CalendarProps {
  
}

function getAllDays(date: Dayjs) {
  const startDate = date.startOf('month')  // 这个月的 1 号
  const day = startDate.day()  // 1号是星期几

  const daysInfo: Array<{date: Dayjs, currentMounth: boolean}> = new Array(6 * 7)

  for (let i = 0; i < day; i++) {
    daysInfo[i] = {
      date: startDate.subtract(day - i, 'day'),
      currentMounth: false
    }
  }

  for (let i = day; i < daysInfo.length; i++) {
    const calcDate = startDate.add(i - day, 'day')
    
    daysInfo[i] = {
      date: calcDate,
      currentMounth: calcDate.month() === date.month()
    }
  }

  return daysInfo
}


// 渲染allDays
function renderDays(days: Array<{date: Dayjs, currentMounth: boolean}>) {
  const rows = [] 
  for (let i = 0; i < 6; i++) {
    const row = []
    for (let j = 0; j < 7; j++) {
      const item = days[i * 7 + j]
      row[j] = <div className={'calendar-month-body-cell '+(item.currentMounth ? 'calendar-month-body-cell-current' : '')}>{item.date.date()}</div>
    }
    rows.push(row)
  }
  return rows.map(row => <div className='calendar-month-body-row'>{row}</div>)
}


function MonthCalendar(props: MonthCalendarProps) {
  const weekList = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  const allDays = getAllDays(props.value)
  return (
    <div className="calendar-month">
      <div className="calendar-month-week-list">
        {
          weekList.map((week) => (
            <div className="calendar-month-week-list-item" key={week}>
              {week}
            </div>
          ))
        }
      </div>
      <div className="calendar-month-body">
        {renderDays(allDays)}
      </div>
    </div>
  )
}

export default MonthCalendar